<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xs="http://www.w3.org/2001/XMLSchema"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>Test conditional selection lists</title>
              <style type="text/css">
              @namespace xf url("http://www.w3.org/2002/xforms");
              xf|select1 {
                 display:block;
                 margin:5px 0;
              }
              
            /* this allows the descenders (gjpqy) to be visible in the drop down list */
            xf|select1 .xf-value {height: 1.5em;} 
         
           /* Makes the labels right aligned in a 10 "x" wide column that floats to the left of the input controls. */
           xf|select1 > xf|label {
             text-align:right;
             padding-right:5px;
             width:10ex;
             float:left;
             text-align:right;
             font-family: Ariel, Helvetica, sans-serif;
             font-weight: bold;
          }
        </style>
      <xf:model>
      
         <xf:instance id="selected-values" xmlns="">
            <data>
               <selected-season>Winter</selected-season>
               <selected-month>January</selected-month>
            </data>
         </xf:instance>

         <xf:instance id="seasons" xmlns="">
            <root>
               <item name="Spring"/>
               <item name="Summer"/>
               <item name="Autumn"/>
               <item name="Winter"/>
            </root>
         </xf:instance>

         <xf:instance id="months" xmlns="">
            <root>
               <item name="January" season="Winter"/>
               <item name="February" season="Winter"/>
               <item name="March" season="Spring"/>
               <item name="April" season="Spring"/>
               <item name="May" season="Spring"/>
               <item name="June" season="Summer"/>
               <item name="July" season="Summer"/>
               <item name="August" season="Summer"/>
               <item name="September" season="Autumn"/>
               <item name="October" season="Autumn"/>
               <item name="November" season="Autumn"/>
               <item name="December" season="Winter"/>
            </root>
         </xf:instance>
         <xf:bind id="selected-season" nodeset="instance('selected-values')/selected-season"/>
      </xf:model>
   </head>
   <body>
      <p>Example of conditional selection lists -
         month selector depends on the current season</p>

         <xf:select1 ref="instance('selected-values')/selected-season">
           <xf:label>Season:</xf:label>
           <xf:itemset nodeset="instance('seasons')/item">
             <xf:label ref="@name"/>
             <xf:value ref="@name"/>
           </xf:itemset>
           <!-- As soon as this value changes we set the month to be null. -->
           <xf:action ev:event="xforms-value-changed">
              <xf:setvalue ref="instance('selected-values')/selected-month" value=""/>
           </xf:action>
         </xf:select1>

         <xf:select1 ref="instance('selected-values')/selected-month">
           <xf:label>Month:</xf:label>
           <xf:itemset nodeset="instance('months')/item[@season=instance('selected-values')/selected-season]">
             <xf:label ref="@name"/>
             <xf:value ref="@name"/>
           </xf:itemset>
         </xf:select1>
         
         <br/>
         <xf:output ref="instance('selected-values')/selected-season">
            <xf:label>selected-season: </xf:label>
         </xf:output>
		  <br/>

         <xf:output ref="instance('selected-values')/selected-month">
            <xf:label>selected-month: </xf:label>
         </xf:output>

         <h4>Relevent Months using Repeat</h4>
	   <xf:repeat nodeset="instance('months')/item[@season=instance('selected-values')/selected-season]">
		   <xf:output ref="@name"/>
	   </xf:repeat>

   </body>
</html>
